<template>
	<div class="index">
		<!-- 模态框 -->
		<div class="zheZhao" v-show="visib">
			<div class="tanChuCeng">
				<button v-on:click="visib = false">close</button>
				<form>
					<input type="text" placeholder="用户" />
				</form>
			</div>
		</div>
		<!-- 弹出按钮 -->
		<button v-on:click="visib = true">显示与隐藏</button>
		<!-- v-if：用来控制元素的销毁与加载的
    tab选项卡
     -->
		<div id="box" v-if="true">我是一段内容</div>
		<hr />
		<!-- 选项卡按钮 -->
		<button v-on:click="index = 1">01</button>
		<button v-on:click="index = 2">02</button>
		<button v-on:click="index = 3">03</button>
		<!-- 选项卡面板 -->
		<ul>
			<li v-show="index === 1" style="background: red">1</li>
			<li v-show="index === 2" style="background: green">2</li>
			<li v-show="index === 3" style="background: blue">3</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			visib: false, // 不显示
			index: 1,
		}
	},
}
</script>

<style>
.zheZhao {
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	width: 100%;
	/* vh vw 把屏幕分成100等份 */
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>